<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/toastr.min.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>


    <![endif]-->

    <style>
        .pc_imgBox {
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .m_imgBox {
            display: block;
            width: 100%;
        }

        .carousel-indicators {
            background: #ccc;
        }

        .time {
            color: #887f78;
            font-size: 10px;
            float: left;
            margin-right: 2px;
        }

        .nameClass {
            color: #887f78;
            font-size: 12px;
            float: left;
            margin-right: 4px;
        }

    </style>
</head>
<body>
<!--<div class="jumbotron">
    <h3 class="container">贱贱和峥峥的约定~</h3>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 指示器 -->
    <!--<ol class="carousel-indicators">-->
    <!--<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
    <!--<li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
    <!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
    <!--</ol>-->
    <!-- 轮播图片及说明文字 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs"
               style="background-image: url('/static/assets/images/backgroud/1.jpg')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="/static/assets/images/backgroud/1.jpg"
                                                                            alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs"
               style="background-image: url('/static/assets/images/backgroud/2.jpg')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="/static/assets/images/backgroud/2.jpg"
                                                                            alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs"
               style="background-image: url('/static/assets/images/backgroud/3.jpg')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="/static/assets/images/backgroud/3.jpg"
                                                                            alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs"
               style="background-image: url('/static/assets/images/backgroud/4.jpg')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="/static/assets/images/backgroud/4.jpg"
                                                                            alt=""></a>
        </div>
    </div>
    <!-- 控制按钮：左右切换 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<div class="row">
    <div class="col-lg-6" style="margin: 10px 10px;">
        <div class="input-group">
            <input id="content" type="text" class="form-control" placeholder="亲爱哒，请输入你要记录的事情~">
            <span class="input-group-btn">
        <button id="saveContent" class="btn btn-success" type="button">保存</button>
      </span>
        </div>
    </div>
</div>

<div class="modal-dialog" role="document" id="myModal"></div>


<ul class="list-group">
    <li class="list-group-item" th:each="content : ${contentList}">
        <div th:switch="${content.isComplete}" style="display: inline">
            <div th:case="1">
                <del>
                    <p th:text="${content.context}" style="display: inline"></p>
                </del>
                <div  class="btn-group-xs" role="group" aria-label="..." >
                    <p class="nameClass" th:text="${content.realname}"></p>&nbsp;&nbsp;
                    <p class="time" th:text="${#dates.format(content.date, 'yyyy-MM-dd')}"></p>
                    <button th:onclick="completeNote([[${content.id}]],0);" type="button" class="btn btn-success">未完成</button>
                    <button th:onclick="deleteNote([[${content.id}]]);" type="button" class="btn btn-danger">删除</button>
                </div>
            </div>
            <div th:case="0">
                <p th:text="${content.context}" style="display: inline"></p>

                <div  class="btn-group-xs" role="group" aria-label="...">
                    <p class="nameClass" th:text="${content.realname}"></p>&nbsp;&nbsp;
                    <p class="time" th:text="${#dates.format(content.date, 'yyyy-MM-dd')}"></p>&nbsp;&nbsp;
                    <button th:onclick="editNote([[${content.id}]]);" type="button" class="btn btn-info">修改</button>
                    <button th:onclick="completeNote([[${content.id}]],1);" type="button" class="btn btn-success">完成</button>
                    <button th:onclick="deleteNote([[${content.id}]]);" type="button" class="btn btn-danger">删除</button>
                </div>
            </div>
            <input type="hidden" id="id" th:value="${content.id}"/>

        </div>
    </li>
</ul>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/assets/js/toastr.min.js"></script>
<script src="/static/assets/js/bootbox.locales.min.js"></script>
<script src="/static/assets/js/bootbox.min.js"></script>
<script src="/static/assets/js/bootbox.all.min.js"></script>

</body>


<script type="text/javascript" th:inline="javascript">
    $(document).ready(function () {
        toastr.options.positionClass = 'toast-bottom-center';

        $("#saveContent").click(function () {
            var content = $("#content").val();
            htmlobj = $.ajax(
                {
                    type: "GET",
                    contentType: "application/json;charset=UTF-8",
                    url: "/noteController/savaContent",
                    data: "context=" + content,
                    dataType: "json",
                    //请求成功
                    success: function (result) {
                        toastr.success('添加成功');
                        setTimeout(function () {
                            window.location.reload()
                        }, 2000);
                    },
                    async: false
                }
            );
        });
    });


    function editNote(id) {
        bootbox.prompt("请输入你要修改的内容哈", function (result) {
            if (result != null && result != '') {
                var data = {
                    "id": id,
                    "context": result
                };
                $.ajax(
                    {
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        url: "/noteController/savaContent",
                        data: data,
                        dataType: "json",
                        //请求成功
                        success: function (result) {
                            toastr.success('修改成功');
                            setTimeout(function () {
                                window.location.reload()
                            }, 2000);
                        },
                        async: false
                    });
            }
        })
    };


    function completeNote(id,stat) {

        var statText = "";
        if (stat == 0){
            statText = "取消完成"
        }else {
            statText = "完成了"
        }

        bootbox.confirm("确定"+statText+"这个任务吗？", function (result) {
            if (result == true) {
                var data = {
                    "id": id,
                    "isComplete": stat
                };
                $.ajax(
                    {
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        url: "/noteController/savaContent",
                        data: data,
                        dataType: "json",
                        //请求成功
                        success: function (result) {
                            toastr.success('任务完成啦');
                            setTimeout(function () {
                                window.location.reload()
                            }, 2000);
                        },
                        async: false
                    });
            }
        })
    };

    function deleteNote(id) {
        bootbox.confirm("确定要删除这个任务吗？", function (result) {
            if (result == true) {
                var data = {
                    "id": id,
                    "isDelete": 1
                };
                $.ajax(
                    {
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        url: "/noteController/savaContent",
                        data: data,
                        dataType: "json",
                        //请求成功
                        success: function (result) {
                            toastr.success('删除成功啦');
                            setTimeout(function () {
                                window.location.reload()
                            }, 2000);
                        },
                        async: false
                    });
            }
        })

    }
</script>
</html>